
*{ margin:0; padding:0;}
li{ list-style-type: none;}
body,html{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#box{
    width: 100%;
    height: 100%;
    background: #000;
    perspective: 800px;
    transition: 1s;
}

#list ul{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 160px;
    /*background-color: rgba(255,0,0,0.5);*/
    margin-top: -80px;
    margin-left: -60px;
    transform-style: preserve-3d;
    transform: translateZ(-2000px) rotateX(0deg) rotateY(0deg);
}
#list ul li{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,127,127,0.5);
    border: 1px solid rgba(127,255,255,0.25);
    box-shadow: 0 0 12px rgba(0,255,255,0.5);
    text-align: center;
    color: #fff;
    font-weight: bold;
    cursor: default;
   transition:  all 3s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}

#list ul li .liCover{
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 9;
    width: 122px;
    height: 162px;
}
#list ul li .liNumber{
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: bold;
    color: rgba(127,255,255,0.75);
    font-size: 14px;
    text-shadow: 0 0 5px rgba(255,255,0,0.5);
}
#list ul li .liTitle{
    font-size: 36px;
    color: rgba(255,255,255,0.7);
    margin-top: 30px;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(0,255,255,0.5);
}
#list ul li .liAuthor{
    margin-top: 10px;
    font-weight: bold;
    color: rgba(127,255,255,0.75);
    font-size: 18px;
    text-shadow: 0 0 5px rgba(0,255,255,0.5);
}
#list ul li .liTime{
    margin-top: 10px;
    font-weight: bold;
    color: rgba(127,255,255,0.75);
    font-size: 14px;
    text-shadow: 0 0 5px rgba(0,255,255,0.5);
}

#btn{
    position:absolute;
    width:300px;
    height:40px;
    left:-300px;
    bottom:20px;
    transition:1.5s;
    z-index: 999;
}

#btn li{
    color:rgba(127,255,255,0.75);
    border:1px solid rgba(127,255,255,0.75);
    font-size:12px;
    font-weight:bold;
    padding:8px 12px;
    float:left;
    cursor:pointer;
    border-radius:3px;
    margin:0 5px;
}

#btn li:hover{
    background:rgba(0,255,255,0.5);
}


#popup{
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:80%;
    background:rgba(0,127,127,0.5);
    border:1px solid rgba(127,255,255,0.25);
    box-shadow:0 0 12px rgba(0,255,255,0.5);
    border-radius:3px;
    transform:rotateY(180deg) scale(0);
    transition:transform 1s;
}
.title,.img,.author,.info{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background:rgba(0,0,0,0.5);
    border-radius:3px;
    border:1px solid rgba(127,255,255,0.25);
    box-shadow:0 0 12px rgba(0,255,255,0.5);
    color: #fff;
    padding: 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}
.title{
    width:90%;
    margin:5% auto;
    height:10%;
    justify-content: center;
}
.img{
    width:35%;
    height:60%;
    margin-left:5%;
    float:left;
}
.img img{
    width: 100%;
}
.author{
    width:50%;
    height:10%;
    float:right;
    margin-right:5%;
}
.info{
    width:50%;
    height:45%;
    float:right;
    margin-right:5%;
    margin-top:3%;
    display:block;
}

#showFrame{
    background:transparent;
    width:100%;
    height:100%;
    position:absolute;
    left:100%;
    top:0;
    transition:left 1s;
}

#back{
    color:rgba(127,255,255,0.75);
    border:1px solid rgba(127,255,255,0.75);
    font-size:12px;
    font-weight:bold;
    padding:8px 12px;
    margin:0 5px;
    cursor:pointer;
    border-radius:3px;
    position:absolute;
    bottom:15px;
    left:15px;
}
#back:hover{
    color: #fff;
    background:rgba(0,255,255,0.5);
}

